// 插件
/*
  vue2中如何使用插件？
  1. 插件的定义  2.插件的注册
  如何定义？
    函数定义法
      function plugin(Vue){
        // Vue.component 全局组件注册
        // Vue.direactive 全局指令注册
        // Vue.prototype.$http = function(){}
        // 只要Vue构造函数能力范围内 就可以通过插件来做
      }
    对象定义法
      const plugin = {
        install(Vue){
          // Vue.component 全局组件注册
          // Vue.direactive 全局指令注册
          // Vue.prototype.$http = function(){}
          // 只要Vue构造函数能力范围内 就可以通过插件来做
        }
      }
  如何注册？
    Vue.use(plugin) // 当执行use方法会自动把Vue构造函数当成一个实参传入到插件install方法中并自动执行
    install方法

  vue3中的插件定义和注册？
   如何定义？
    函数定义法
      function plugin(app){
        // app.component 全局组件注册
        // app.direactive 全局指令注册
        // app.prototype.$http = function(){}
        // 只要app能力范围内 就可以通过插件来做
      }
    对象定义法
      const plugin = {
        install(app){
          // app.component 全局组件注册
          // app.direactive 全局指令注册
          // app.prototype.$http = function(){}
          // 只要app能力范围内 就可以通过插件来做
        }
      }
    如何注册？
      main.js
      createApp() -> app 应用实例对象
      createApp().use(plugin) 当执行use方法会自动把app当成一个实参传入到插件install方法中并自动执行
    install方法
*/

// 全局指令

/**
  vue2如何定义全局指令？

    Vue.directive('指令的名称',{
      // 指令所绑定的元素完成挂载时自动调用的函数
      inserted(el, binding){
        // el：指令绑在谁身上 el就指代哪个dom元素
        // binding.value : 指令等于号后面绑定的表达式的值
        // v-if="showFlag"
      }
    })

    使用指令的时候 v-指令名称

  vue3中的变化？
   createApp().directive('指令名称',{
     mounted(el,binding){
        // el：指令绑在谁身上 el就指代哪个dom元素
        // binding.value : 指令等于号后面绑定的表达式的值
        // v-if="showFlag"
     }
   })
 */

// 1. 实现一个没有功能的插件 -> 保证插件ok

// 2. 写一个没有功能全局指令 -> 保证指令注册OK

// 3. 添加图片懒加载的功能 -> 具体功能实现

// 调用use方法 -> 调用了插件的install方法
// -> app.direactive() -> 注册了一个全局指令
import { useIntersectionObserver } from '@vueuse/core'
const directivePlugin = {
  install (app) {
    // todos
    console.log('插件注册了', app)
    // 调用方法进行全局指令注册
    app.directive('img-lazy', {
      mounted (el, binding) {
        console.log(el, binding.value)
        // 编写指令的具体逻辑
        // 图片懒加载  判断当前指令所绑定的图片元素是否进入到视口区域 如果进来了就正式发送请求(src = url)
        // 解决的问题
        // 1. 如何判断图片进入到了视口区域？ vueuse
        // 2. img.src = url
        // 这个函数是一个非常严格 意义上的监听 纵向和横向都可以监听到
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting 布尔值  true代表进入到视口区域  false 代表没进入视口区域
            console.log(isIntersecting)
            if (isIntersecting) {
              // 进入到视口区域
              el.src = binding.value
              stop()
              // isIntersection 不是只打印一次 只要监听的元素进入视口移出视口都会重复执行
              // 为了性能考虑  一旦进入视口之后完成绑定 就不重复监听了
            }
          }
        )
      }
    })
  }
}

export default directivePlugin
